<!doctype html>
<html>
<head>
	<style>
		body {
			font-family: sans-serif;
		}

		#browser, #playlist {
			border-radius: 10px;
			padding: 5px 5px 3px 5px;
			width: 300px;
			float: left;
			margin-right: 15px;
			height: 500px;
			overflow: auto;
		}

		#browser a, #playlist a {
			display: block;
			cursor: pointer;
			padding: 2px 4px;
			border-radius: 5px;
			overflow: hidden;
			margin-bottom: 2px;
		}

		#browser {
			background: #8C9A20;
		}

		#browser a.dir {
			background: #BECD53;
			color: black;
		}

		#browser a.file {
			background: #5A640A;
			color: white;
		}

		#playlist {
			background: #881C46;
		}

		#playlist a {
			background: #C44F7C;
		}

		#playlist a.playing {
			background: #3B1E6C;
			color: white;
		}

		#browser a:hover, #playlist a:hover {
			background: #200A46;
			color: white;
		}

		#controls {
			margin-top: 10px;
		}

		#controls a {
			cursor: pointer;
			background: #eee;
			padding: 5px;
			border-radius: 5px;
		}
	</style>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
		var root = "/f/";
		var path = [];
		var cache = {};
		function init() {
			load(path);
			$('#player').bind('ended', next);
			$('#addall').click(addAll);
			$('#next').click(next);
		}
		function load(path) {
			var url = root + path.join('/');
			if (typeof cache[url] != "undefined") {
				populate(cache[url]);
				return;
			}
			$.ajax({
				url:url,
				dataType:"json",
				success:function (data) {
					populate(data)
					cache[url] = data;
				}
			});
		}
		function populate(files) {
			var $b = $('#browser').empty();

			function add(i, f) {
				if (f.Name[0] == '.' || f.Name[0] == ':') return;
				var dir = f.IsDir;
				var cl = dir ? "dir" : "file";
				f.Path = path.join('/');
				$('<a></a>').text(f.Name).data('file', f)
						.addClass(cl).appendTo($b)
						.click(dir ? clickDir : clickFile);
			}

			files.sort(function (a, b) {
				a = a.Name.toLowerCase();
				b = b.Name.toLowerCase();
				if (a > b) return 1;
				if (a < b) return -1;
				return 0;
			});
			$b.append(up());
			$.each(files, add);
		}
		function up() {
			return $('<a class="dir">..</a>').click(function () {
				path.pop();
				load(path);
			});
		}
		function clickDir(e) {
			path.push($(e.target).data('file').Name);
			load(path);
		}
		function clickFile(e) {
			addToPlaylist($(e.target).data('file'));
		}
		function addToPlaylist(f) {
			var $p = $('#playlist');
			var playnow = ($p.find('a').length == 0);
			var $d = $('<a></a>').text(f.Name).data('file', f)
					.appendTo($p)
					.click(function (e) {
						play(e.target);
					});
			if (playnow) $d.click();
		}
		function addAll() {
			$('#browser a.file').each(function (i, e) {
				addToPlaylist($(e).data('file'));
			});
		}
		function play(el) {
			var name = $(el).data('file').Name;
			var path = $(el).data('file').Path;
			var url = root + path + '/' + name;
			$('#playlist a').removeClass('playing');
			$(el).addClass('playing')
			$('#player').attr('src', url);
		}
		function next() {
			var $next = $('#playlist a.playing').next();
			if ($next.length) play($next);
		}
		google.load("jquery", "1");
		google.setOnLoadCallback(init);
	</script>
</head>
<body>
<audio id="player" controls autoplay autobuffer>
	<p>What? Your browser doesn't support &lt;audio&gt;?! Lame.</p>
</audio>
<div id="browser"></div>
<div id="playlist"></div>
<div id="controls">
	<a id="addall">Add all</a>
	<a id="next">Next</a>
</div>
</body>
</html>
